<template>
  <el-card shadow="never">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      label-width="68px"
      style="display: flex"
    >
      <el-form-item prop="type">
        <el-select
          v-model="queryParams.type"
          style="width: 100px"
          @change="handleChangeType"
        >
          <el-option
            v-for="item in typeList"
            :key="item.type"
            :label="item.name"
            :value="item.type"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="range">
        <el-date-picker
          v-if="queryParams.type === 1"
          v-model="queryParams.range"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 320px"
          @change="handleChangeDate"
          value-format="YYYY-MM-DD"
          :disabled-date="disabledDate"
        />
        <el-date-picker
          v-else-if="queryParams.type === 2"
          v-model="queryParams.range"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          style="width: 320px"
          @change="handleChangeMonth"
          value-format="YYYY-MM"
          :disabled-date="disabledDate"
        />
      </el-form-item>
      <div style="position: absolute; right: 50px">
        <el-form-item prop="condition">
          <el-select
            v-model="queryParams.condition"
            style="width: 100px"
            @change="handleChangeCondition"
            placeholder="高级筛选"
            clearable
          >
            <el-option
              v-for="item in conditionList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="teacher" v-if="queryParams.condition === 'teacher'">
          <el-select
            v-model="queryParams.teacher"
            style="width: 300px"
            placeholder="请选择老师"
            @change="handleChange"
          >
            <el-option
              v-for="item in teacherList"
              :key="item.value"
              :label="
                !item.isJob
                  ? item.label + '(已离职)'
                  : !item.isTeacher
                  ? item.label + '(非授课)'
                  : item.label
              "
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          prop="classId"
          v-else-if="queryParams.condition === 'classId'"
        >
          <el-select
            v-model="queryParams.classId"
            style="width: 300px"
            placeholder="请选择班级"
            @change="handleChange"
          >
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.beOver === '0' ? item.name + '(已结业)' : item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          prop="courseId"
          v-else-if="queryParams.condition === 'courseId'"
        >
          <el-select
            v-model="queryParams.courseId"
            style="width: 300px"
            placeholder="请选择课程"
            @change="handleChange"
          >
            <el-option
              v-for="item in courseList"
              :key="item.id"
              :label="item.state === '1' ? item.name + '(已停用)' : item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
  </el-card>
  <el-card shadow="never">
    <span style="font-size: 16px; font-weight: bold">核心数据</span>
    <el-tooltip
      class="box-item"
      effect="dark"
      :content="
        queryParams.type === 1
          ? '日同比：（当天-上周的当天）/上周的当天*100%；日环比：（当天-昨天）/昨天*100%'
          : '月同比：（当月-去年的当月）/去年的当月*100%；月环比：（当月-上月）/上月*100%'
      "
      placement="right-start"
    >
      <span
        style="color: rgb(183, 183, 183); margin-left: 10px; cursor: pointer"
      >
        <el-icon><InfoFilled /></el-icon>
        <span style="margin-left: 3px; color: #666; font-size: 14px"
          >什么是同环比?
        </span>
      </span>
    </el-tooltip>
    <div class="block-group">
      <CoreData
        v-if="!queryParams.condition"
        title="在读学员数"
        :crData="coreData.num"
        :hbData="coreData.numWeek"
        :tbData="coreData.numYear"
        :type="queryParams.type"
        :linkTo="
          '/dataCenter/currentStudentList/index/' +
          '?start=' +
          queryParams.startDate +
          '&end=' +
          queryParams.endDate +
          '&type=' +
          queryParams.type
        "
        tips="所选时间段最后一刻的在读学员数"
        appendClass="first"
      />
      <CoreData
        title="老师授课出勤率"
        :crData="coreData.attendance"
        :hbData="coreData.attendanceWeek"
        :tbData="coreData.attendanceYear"
        :type="queryParams.type"
        :linkTo="'/registrar/record/?params=' + JSON.stringify(queryParams)"
        tips="筛选时间内，老师实授课课时/老师应授课时*100%"
        :appendClass="queryParams.condition && 'first'"
      />
      <CoreData
        title="学员到课出勤率"
        :crData="coreData.studentAttendance"
        :hbData="coreData.studentAttendanceWeek"
        :tbData="coreData.studentAttendanceYear"
        :type="queryParams.type"
        :linkTo="'/registrar/record/?params=' + JSON.stringify(queryParams)"
        tips="所选时间段内，点名人次（包含补课、除试听）/点名应到人次*100%"
        :appendClass="queryParams.condition && 'first'"
      />
      <CoreData
        title="老师实授课时"
        :crData="coreData.classHour"
        :hbData="coreData.classHourWeek"
        :tbData="coreData.classHourYear"
        :type="queryParams.type"
        :linkTo="'/registrar/record/?params=' + JSON.stringify(queryParams)"
        tips="所选时间段内，老师的授课课时数之和"
        :appendClass="queryParams.condition && 'last'"
      />
      <CoreData
        title="老师应授课时"
        :crData="coreData.specifyNumber"
        :hbData="coreData.specifyNumberWeek"
        :tbData="coreData.specifyNumberYear"
        :type="queryParams.type"
        :linkTo="'/registrar/record/?params=' + JSON.stringify(queryParams)"
        tips="所选时间段内，老师的排课数之和"
        :appendClass="queryParams.condition && 'last'"
      />
      <CoreData
        v-if="!queryParams.condition"
        title="总课消金额"
        :crData="coreData.consumption"
        :hbData="coreData.consumptionWeek"
        :tbData="coreData.consumptionYear"
        :type="queryParams.type"
        :linkTo="'/registrar/record/?params=' + JSON.stringify(queryParams)"
        tips="所选时间段内，产生的所有课消金额之和"
        appendClass="last"
      />
    </div>
  </el-card>
  <el-card shadow="never">
    <span style="font-size: 16px; font-weight: bold">数据趋势</span>
    <el-form :inline="true" label-width="100px" style="display: flex">
      <el-radio-group v-model="radio1" @change="handleRadioChange">
        <el-row>
          <el-col :span="24" v-if="!queryParams.condition">
            <el-form-item label="学员概况：">
              <el-radio value="numList">在读学员</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="出勤情况：">
              <el-radio value="totalNumList">点名应到人次</el-radio>
              <el-radio value="callNumList">点名实到人次</el-radio>
              <el-radio value="repairNumList">缺课已补人次</el-radio>
              <el-radio value="callOrderNumList">已点名课次</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="课消情况：">
              <el-radio value="classHourList">老师实授课时</el-radio>
              <el-radio value="specifyNumberList">老师应授课时</el-radio>
              <el-radio value="classHourPayList">学员课消课时</el-radio>
              <el-radio
                value="amountList"
                v-if="
                  !queryParams.condition || queryParams.condition === 'courseId'
                "
                >总课消金额</el-radio
              >
              <!-- <el-radio value="9">点名课消金额</el-radio>
              <el-radio value="10">按月课消金额</el-radio> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-radio-group>
    </el-form>
    <div ref="chartContainer" style="width: 100%; height: 300px"></div>
  </el-card>
  <el-card shadow="never">
    <div style="font-size: 16px; font-weight: bold">数据明细</div>
    <el-radio-group
      v-model="tab"
      @change="handleChangeTab"
      style="margin-top: 10px"
    >
      <el-radio-button :value="1">趋势概况</el-radio-button>
      <el-radio-button :value="2" v-if="!queryParams.condition"
        >上课老师报表</el-radio-button
      >
      <el-radio-button :value="3" v-if="!queryParams.condition"
        >班级报表</el-radio-button
      >
      <el-radio-button :value="4" v-if="!queryParams.condition"
        >课程报表</el-radio-button
      >
    </el-radio-group>
    <div v-if="tab === 1">
      <el-row :gutter="10" class="export-box">
        <el-col :span="1.5">
          <el-button
            type="plain"
            plain
            icon="Download"
            @click="handleExport(1, '趋势概况表')"
          >
            导出
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="list" border>
        <el-table-column
          label="日期"
          prop="dateValue"
          fixed="left"
          xxx
          min-width="120"
        />
        <el-table-column
          prop="num"
          xxx
          min-width="140"
          v-if="!queryParams.condition"
        >
          <template #header>
            在读学员数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段最后一刻的在读学员数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="attendance" xxx min-width="160">
          <template #header>
            老师出勤率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="筛选时间内，老师实授课课时/老师应授课时*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="studentAttendance" xxx min-width="160">
          <template #header>
            学员到课出勤率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，点名人次（包含补课、除试听）/点名应到人次*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="totalNum" xxx min-width="160">
          <template #header>
            点名应到人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，排课的学员数之和（试听、补课不算）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="callNum" xxx min-width="160">
          <template #header>
            点名实到人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，实际到课（包含到课、迟到）的学员数之和（包含补课、除试听）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="repairNum" xxx min-width="160">
          <template #header>
            缺课已补人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，缺课学员在后续已补课的学员数（进行标记已补）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="callOrderNum" xxx min-width="140">
          <template #header>
            已点名课次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的有效点名课次总数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="classHour" xxx min-width="160">
          <template #header>
            老师实授课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，老师的授课课时数之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="specifyNumber" xxx min-width="160">
          <template #header>
            老师应授课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，老师的排课数之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="classHourPay" xxx min-width="180">
          <template #header>
            学员课消课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，学员上课扣课时之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          xxx
          min-width="160"
          v-if="!queryParams.condition"
        >
          <template #header>
            总课消金额(元)
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，产生的所有课消金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="classDate" xxx min-width="170">
          <template #header>
            点名课消金额(元)
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，学员上课扣课消金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="classDate" xxx min-width="170">
          <template #header>
            按月课消金额(元)
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，按月课消的课程扣课消金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="tableParams.pageNum"
        v-model:limit="tableParams.pageSize"
        @pagination="getList"
        size="small"
      />
    </div>
    <div v-else-if="tab === 2">
      <el-row :gutter="10" class="query-box">
        <el-col :span="22.5">
          <el-form
            :model="tableParams"
            ref="queryRef"
            :inline="true"
            label-width="68px"
            style="display: flex"
          >
            <el-form-item prop="teacher" label="上课老师">
              <el-select
                v-model="tableParams.teacher"
                style="width: 240px"
                placeholder="请选择老师"
                @change="queryInitList"
                clearable
              >
                <el-option
                  v-for="item in teacherList"
                  :key="item.value"
                  :label="
                    !item.isJob
                      ? item.label + '(已离职)'
                      : !item.isTeacher
                      ? item.label + '(非授课)'
                      : item.label
                  "
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="plain"
            plain
            icon="Download"
            @click="handleExport(2, '上课老师报表')"
          >
            导出
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="list" border>
        <el-table-column
          min-width="100"
          align="center"
          label="序号"
          prop="index"
          fixed="left"
        >
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上课老师" prop="name" fixed="left" />
        <el-table-column label="当前状态" prop="isJob" />
        <el-table-column prop="attendance" xxx min-width="160">
          <template #header>
            老师出勤率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="筛选时间内，老师实授课课时/老师应授课时*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="studentAttendance" xxx min-width="160">
          <template #header>
            学员到课出勤率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，点名人次（包含补课、除试听）/点名应到人次*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="totalNum" xxx min-width="160">
          <template #header>
            点名应到人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，排课的学员数之和（试听、补课不算）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="callNum" xxx min-width="160">
          <template #header>
            点名实到人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，实际到课（包含到课、迟到）的学员数之和（包含补课、除试听）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="repairNum" xxx min-width="160">
          <template #header>
            缺课已补人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，缺课学员在后续已补课的学员数（进行标记已补）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="callOrderNum" xxx min-width="140">
          <template #header>
            已点名课次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的有效点名课次总数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="classHour" xxx min-width="160">
          <template #header>
            老师实授课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，老师的授课课时数之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="specifyNumber" xxx min-width="160">
          <template #header>
            老师应授课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，老师的排课数之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="classHourPay" xxx min-width="180">
          <template #header>
            学员课消课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，学员上课扣课时之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="classDate" xxx min-width="170">
          <template #header>
            点名课消金额(元)
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，学员上课扣课消金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <!-- <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="handleView(scope.$index)"
            >
              查看趋势
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="tableParams.pageNum"
        v-model:limit="tableParams.pageSize"
        @pagination="getList"
        size="small"
      />
    </div>
    <div v-else-if="tab === 3">
      <el-row :gutter="10" class="query-box">
        <el-col :span="22.5">
          <el-form
            :model="tableParams"
            ref="queryRef"
            :inline="true"
            label-width="68px"
            style="display: flex"
          >
            <el-form-item prop="classId" label="班级">
              <el-select
                v-model="tableParams.classId"
                style="width: 240px"
                placeholder="请选择班级"
                @change="queryInitList"
                clearable
              >
                <el-option
                  v-for="item in classList"
                  :key="item.id"
                  :label="
                    item.beOver === '0' ? item.name + '(已结业)' : item.name
                  "
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="classType" label="班级分类">
              <el-select
                style="width: 240px"
                v-model="tableParams.classType"
                placeholder="请选择班级分类"
                @change="queryInitList"
                clearable
              >
                <el-option
                  v-for="item in classTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="plain"
            plain
            icon="Download"
            @click="handleExport(3, '班级报表')"
          >
            导出
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="list" border>
        <el-table-column
          min-width="100"
          align="center"
          label="序号"
          prop="index"
          fixed="left"
        >
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="班级" prop="name" fixed="left" />
        <el-table-column label="班级分类" prop="classType" fixed="left" />
        <el-table-column label="当前状态" prop="beOver" />
        <el-table-column prop="studentCount" xxx min-width="160">
          <template #header>
            在读学员数
            <el-tooltip
              class="box-item"
              effect="dark"
              content="为了保证查询性能，在读学员数从6月1号开始更新，且支持查看3个月内学员明细"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="plannedStudentCount" xxx min-width="160">
          <template #header>
            班级容量
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段最后一刻，机构设置的班级容量"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column xxx min-width="160">
          <template #header>
            满班率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="该班级在读学员数/班级容量"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
          <template #default="scope">
            {{
              scope.row.plannedStudentCount === "0"
                ? "--"
                : parseFloat(
                    (
                      (scope.row.studentCount * 100) /
                      scope.row.plannedStudentCount
                    ).toFixed(2)
                  ) + "%"
            }}
          </template>
        </el-table-column>

        <el-table-column prop="attendance" xxx min-width="160">
          <template #header>
            老师出勤率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="筛选时间内，老师实授课课时/老师应授课时*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="studentAttendance" xxx min-width="160">
          <template #header>
            学员到课出勤率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，点名人次（包含补课、除试听）/点名应到人次*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="totalNum" xxx min-width="160">
          <template #header>
            点名应到人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，排课的学员数之和（试听、补课不算）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="callNum" xxx min-width="160">
          <template #header>
            点名实到人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，实际到课（包含到课、迟到）的学员数之和（包含补课、除试听）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="repairNum" xxx min-width="160">
          <template #header>
            缺课已补人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，缺课学员在后续已补课的学员数（进行标记已补）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="callOrderNum" xxx min-width="140">
          <template #header>
            已点名课次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的有效点名课次总数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="classHour" xxx min-width="160">
          <template #header>
            老师实授课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，老师的授课课时数之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="specifyNumber" xxx min-width="160">
          <template #header>
            老师应授课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，老师的排课数之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="classHourPay" xxx min-width="180">
          <template #header>
            学员课消课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，学员上课扣课时之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="classDate" xxx min-width="170">
          <template #header>
            点名课消金额(元)
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，学员上课扣课消金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <!-- <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="handleView(scope.$index)"
            >
              查看趋势
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="tableParams.pageNum"
        v-model:limit="tableParams.pageSize"
        @pagination="getList"
        size="small"
      />
    </div>
    <div v-else-if="tab === 4">
      <el-row :gutter="10" class="query-box">
        <el-col :span="22.5">
          <el-form
            :model="tableParams"
            ref="queryRef"
            :inline="true"
            label-width="68px"
            style="display: flex"
          >
            <el-form-item prop="courseId" label="课程">
              <el-select
                v-model="tableParams.courseId"
                style="width: 300px"
                placeholder="请选择课程"
                @change="queryInitList"
                clearable
              >
                <el-option
                  v-for="item in courseList"
                  :key="item.id"
                  :label="
                    item.state === '1' ? item.name + '(已停用)' : item.name
                  "
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="lessonType" label="授课方式">
              <el-select
                v-model="tableParams.lessonType"
                placeholder="请选择授课方式"
                @change="queryInitList"
                clearable
                style="width: 240px"
              >
                <el-option
                  v-for="dict in edu_teaching_mode"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="plain"
            plain
            icon="Download"
            @click="handleExport(4, '课程报表')"
          >
            导出
          </el-button>
        </el-col>
      </el-row>
      <el-table v-loading="tableLoading" :data="list" border>
        <el-table-column
          min-width="100"
          align="center"
          label="序号"
          prop="index"
          fixed="left"
        >
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="课程" prop="name" fixed="left" />
        <el-table-column label="授课方式" prop="lessonType" fixed="left" />
        <el-table-column label="当前状态" prop="state" />

        <el-table-column prop="attendance" xxx min-width="160">
          <template #header>
            老师出勤率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="筛选时间内，老师实授课课时/老师应授课时*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="studentAttendance" xxx min-width="160">
          <template #header>
            学员到课出勤率
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，点名人次（包含补课、除试听）/点名应到人次*100%"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="totalNum" xxx min-width="160">
          <template #header>
            点名应到人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，排课的学员数之和（试听、补课不算）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="callNum" xxx min-width="160">
          <template #header>
            点名实到人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，实际到课（包含到课、迟到）的学员数之和（包含补课、除试听）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="repairNum" xxx min-width="160">
          <template #header>
            缺课已补人次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的点名记录中，缺课学员在后续已补课的学员数（进行标记已补）"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="callOrderNum" xxx min-width="140">
          <template #header>
            已点名课次
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内的有效点名课次总数"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="classHour" xxx min-width="160">
          <template #header>
            老师实授课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，老师的授课课时数之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="specifyNumber" xxx min-width="160">
          <template #header>
            老师应授课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，老师的排课数之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="classHourPay" xxx min-width="180">
          <template #header>
            学员课消课时
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，学员上课扣课时之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="amount" xxx min-width="160">
          <template #header>
            总课消金额(元)
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，产生的所有课消金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="classDate" xxx min-width="170">
          <template #header>
            点名课消金额(元)
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，学员上课扣课消金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="classDate" xxx min-width="170">
          <template #header>
            按月课消金额(元)
            <el-tooltip
              class="box-item"
              effect="dark"
              content="所选时间段内，按月课消的课程扣课消金额之和"
              placement="top"
            >
              <el-icon><InfoFilled /></el-icon>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <!-- <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="handleView(scope.$index)"
            >
              查看趋势
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="tableParams.pageNum"
        v-model:limit="tableParams.pageSize"
        @pagination="getList"
        size="small"
      />
    </div>
  </el-card>
</template>

<script setup>
import * as echarts from "echarts";
import CoreData from "../components/coreData.vue";
import {
  countAcademicDataAPI,
  dataTrendsAPI,
  dataTrendsTeacherAPI,
  dataTrendsClassAPI,
  dataTrendCourseAPI,
  exportDataTrendAPI,
  dataTrendsEChartAPI,
} from "@/api/dataCenter/registrarData";
import { getClassListAPI } from "@/api/registrar/class";
import { getCourseListAPI } from "@/api/registrar/course";
import { getPeopleList } from "@/api/studentManagement/index";
import { getTLabelListAPI } from "@/api/registrar/classroom";
const { proxy } = getCurrentInstance();
const { edu_teaching_mode } = proxy.useDict("edu_teaching_mode");
const loading = ref(false);
const tableLoading = ref(false);
const typeList = [
  { name: "按天", type: 1 },
  //{ name: "按周", type: 3 },
  { name: "按月", type: 2 },
  //{ name: "按季度", type: 4 },
];

const conditionList = [
  { name: "主班老师", value: "teacher" },
  { name: "班级", value: "classId" },
  { name: "课程", value: "courseId" },
];

const classList = ref([]);
const teacherList = ref([]);
const courseList = ref([]);
const classTypeList = ref([]);

const chartContainer = ref(null);
const tab = ref(1);
const list = ref([]);
const total = ref(0);

const data = reactive({
  queryParams: {
    condition: null,
    type: 1,
    range: [
      formatDate(new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000)),
      formatDate(new Date()),
    ],
    classId: null,
    teacher: null,
    courseId: null,
    startDate: formatDate(
      new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000)
    ),
    endDate: formatDate(new Date()),
  },
  tableParams: {
    pageNum: 1,
    pageSize: 10,
    teacher: null,
    classId: null,
    courseId: null,
    classType: null,
    lessonType: null,
  },
});

const { queryParams, tableParams } = toRefs(data);

const coreData = ref({}); // 核心数据
const echartsData = ref([]); // 图表数据，格式如下： [["2020-1", 2.0],["2020-2", 4.9], ["2020-3", 7.0], ]
const allEchartsData = ref({});

const radio1 = ref("numList");
let radioMap = ref({
  numList: "在读学员",
  totalNumList: "点名应到人次",
  callNumList: "点名实到人次",
  repairNumList: "缺课已补人次",
  classHourList: "老师实授课时",
  specifyNumberList: "老师应授课时",
  classHourPayList: "学员课消课时",
  amountList: "总课消金额",
});

// onMounted(() => {
//   nextTick(() => {
//     initEcharts();
//   });
// });

// 计算-------------------------------------------------------------------------------------------------
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  return `${year}-${month}-${day}`;
}

function formatMonth(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  return `${year}-${month}`;
}

function disabledDate(time) {
  return time > Date.now();
}

// 事件-----------------------------------------------------------------------------------------------
function handleChangeType(value) {
  if (value === 1) {
    queryParams.value.range = [formatDate(new Date()), formatDate(new Date())];
    handleChangeDate(queryParams.value.range);
  } else {
    queryParams.value.range = [
      formatMonth(new Date()),
      formatMonth(new Date()),
    ];
    handleChangeDate(queryParams.value.range);
  }
}

function handleChangeCondition(value) {
  queryParams.value.teacher = null;
  queryParams.value.classId = null;
  queryParams.value.courseId = null;
  if (value) {
    tab.value = 1;
    radio1.value = "totalNumList";
    handleRadioChange("totalNumList");
    queryInitList();
  }

  if (!value) {
    radio1.value = "numList";
    handleQuery();
  }
}

function handleChangeDate(arr) {
  queryParams.value.startDate = arr[0];
  queryParams.value.endDate = arr[1];
  handleQuery();
}
function handleChangeMonth(arr) {
  queryParams.value.startDate = arr[0];
  queryParams.value.endDate = arr[1];
  handleQuery();
}

function handleChange(value) {
  if (value) handleQuery();
}

function queryInitList() {
  tableParams.pageNum = 1;
  getList();
}

function handleChangeTab(value) {
  tableParams.value = {
    pageNum: 1,
    pageSize: 10,
    teacher: null,
    classId: null,
    courseId: null,
    classType: null,
    lessonType: null,
  };
  getList();
}

function initEcharts() {
  const chartInstance = echarts.init(chartContainer.value);
  const option = {
    grid: {
      x: 40,
      x2: 50,
    },
    tooltip: {
      trigger: "axis",
    },
    toolbox: {
      show: true,
      feature: {
        magicType: { show: true, type: ["line", "bar"] },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        //boundaryGap: false,
        // prettier-ignore
        //data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      },
    ],

    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: radioMap.value[radio1.value],
        type: "bar",
        // data: [
        //   2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
        // ],
        data: echartsData.value,
        markPoint: {
          data: [
            { type: "max", name: "最高" },
            { type: "min", name: "最低" },
          ],
          symbolSize: 1,
          symbolOffset: [0, -10],
          label: {
            formatter: "{b}: {c}",
            color: "black",
          },
        },
        markLine: {
          data: [{ type: "average", name: "平均值" }],
        },
      },
    ],
    dataZoom: [
      {
        show: true,
        //start: 0,
        //end: 100,
        startValue: 0,
        endValue: 11, // 显示12个月
        height: 10,
      },
      {
        type: "inside",
        //start: 94,
        //end: 100,
      },
    ],
  };
  chartInstance.setOption(option);
  window.addEventListener("resize", () => {
    chartInstance.resize();
  });
}

function handleRadioChange(val) {
  echartsData.value = allEchartsData.value[val];
  initEcharts();
}

// 方法------------------------------------------------------------------------------------------

// 课程
function getCourseList() {
  loading.value = true;
  getCourseListAPI({
    pageSize: 9999,
    pageNum: 1,
    open: 1,
  }).then((response) => {
    courseList.value = response.rows;
    loading.value = false;
  });
}

// 班级
function getClassList() {
  loading.value = true;
  getClassListAPI({ pageSize: 9999, pageNum: 1 }).then((response) => {
    classList.value = response.rows;
    loading.value = false;
  });
}

// 获取教师列表
function getTeacherList() {
  loading.value = true;
  getPeopleList({ isTeach: 1 }).then((response) => {
    teacherList.value = response.data;
    loading.value = false;
  });
}

// 班级分类
function getClassTypeList() {
  loading.value = true;
  getTLabelListAPI({ lableType: "class_type" }).then((response) => {
    classTypeList.value = response.data;
    loading.value = false;
  });
}

function getList() {
  if (tab.value === 1) dataTrends();
  else if (tab.value === 2) dataTrendsTeacher();
  else if (tab.value === 3) dataTrendsClass();
  else if (tab.value === 4) dataTrendCourse();
}

// 数据趋势
function dataTrends() {
  loading.value = true;
  const param = Object.assign(
    {
      pageNum: tableParams.value.pageNum,
      pageSize: tableParams.value.pageSize,
    },
    queryParams.value
  );
  dataTrendsAPI(param).then((response) => {
    list.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function dataTrendsTeacher() {
  loading.value = true;
  const param = Object.assign({}, queryParams.value, tableParams.value);
  dataTrendsTeacherAPI(param).then((response) => {
    list.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 班级
function dataTrendsClass() {
  loading.value = true;
  const param = Object.assign({}, queryParams.value, tableParams.value);
  dataTrendsClassAPI(param).then((response) => {
    list.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 课程
function dataTrendCourse() {
  loading.value = true;
  const param = Object.assign({}, queryParams.value, tableParams.value);
  dataTrendCourseAPI(param).then((response) => {
    list.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 导出
function handleExport(type, fileName) {
  let param;
  if (type === 1) {
    param = Object.assign({ exportType: type }, queryParams.value);
  } else {
    param = Object.assign(
      { exportType: type },
      queryParams.value,
      tableParams.value
    );
  }
  param.pageNum = 1;
  param.pageSize = 9999;
  exportDataTrendAPI(param).then((res) => {
    let blob = new Blob([res], {
      type: "application/vnd.ms-excel;charset=utf-8",
    });
    const url = window.URL.createObjectURL(blob),
      link = document.createElement("a");
    link.href = url;
    link.download = fileName + new Date().getTime();
    link.click();
    URL.revokeObjectURL(url); // 释放内存
    proxy.$modal.msgSuccess("导出成功");
  });
}

function initPicker() {
  getCourseList();
  getClassList();
  getTeacherList();
  getClassTypeList();
}

// 查询方法
function handleQuery() {
  countAcademicData();
  getEchartsData();
  getList();
}

// 核心数据
function countAcademicData() {
  loading.value = true;
  countAcademicDataAPI(queryParams.value).then((response) => {
    coreData.value = response.data;
    loading.value = false;
  });
}

// echarts数据
function getEchartsData() {
  loading.value = true;
  dataTrendsEChartAPI(queryParams.value).then((response) => {
    loading.value = false;
    allEchartsData.value = response.data;
    echartsData.value = allEchartsData.value[radio1.value];
    initEcharts();
  });
}

initPicker();

handleQuery();
</script>

<style lang="scss" scoped>
.el-form-item--default {
  margin-bottom: 0 !important;
}
.block-group {
  display: flex;
  overflow-x: auto;
}
.el-card {
  margin-bottom: 10px !important;
}
.export-box {
  display: flex;
  flex-direction: row-reverse;
  margin: 10px 0;
}
.query-box {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin: 10px 0;
}
</style>
